<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
    <!--添加商品按钮-->
    <button type="button" class="layui-btn" id="addBtn">添加商品</button>
    <!--添加商品form页面-->
    <form class="layui-form" id="addForm" style="display: none;padding: 15px 15px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="pname" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单价</label>
            <div class="layui-input-block">
                <input type="text" name="price" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-block">
                <input type="text" name="stock" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="des" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addFilter">立即添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <!--搜索--><br/>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" name="pname" id="aaa"
                   placeholder="请填写图书名"
                   class="layui-input">
        </div>
    </div>
    <button class="layui-btn layui-btn-sm" id="search" lay-filter="search-department">搜索</button><br/>
    <!--toolbar工具栏1-->
    <!--<script type="text/html" id="bar1">
    </script>-->
    <button class="layui-btn layui-btn-sm" id="deleteSelected" lay-event="deleteSelected">删除选中</button>
    <!--商品展示表格-->
    <table id="myTable" lay-filter="tableFilter"></table>
    <!--toolbar工具栏2-->
    <script type="text/html" id="bar2">
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="upd">修改</a>
    </script>
    <!--修改商品form页面-->
    <form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 15px 15px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="pid"/>
                <input type="text" name="pname" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单价</label>
            <div class="layui-input-block">
                <input type="text" name="price" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-block">
                <input type="text" name="stock" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="des" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updatFilter">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <!--layui代码-->
    <script>
        layui.use(['table','form','layer'],function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            //搜索  点击搜索按钮触发单击事件  然后重载表格
            $('#search').click(function () {
                table.reload('myTable',{
                    where:{
                        pname:$('#aaa').val()
                    }
                     ,page: {
                         curr: 1 //重新从第 1 页开始
                     }
                })
            })
            //渲染表格 展示所有商品
            table.render({
                elem:'#myTable',
                url:'product/show',
                height: 312,
                page:true,
                limits:[3,4,5],
                limit:3,
                cols:[[
                    {type: 'checkbox', fixed: 'left'},  //选择框
                    {field:'pid',title:'商品编号',width:80, sort: true},
                    {field:'pname',title:'商品名',width:80, sort: true},
                    {field:'price',title:'单价',width:80, sort: true},
                    {field:'stock',title:'库存',width:80, sort: true},
                    {field:'des',title:'商品描述',width:180, sort: true},
                    {fixed: 'right',title:'操作', toolbar: '#bar2'},
                ]]
            })
            //添加操作
            $('#addBtn').click(function () {
                layer.open({
                    type:1,
                    title:'添加页面',
                    area:'500px',
                    content:$('#addForm')
                })
            })
            form.on('submit(addFilter)',function () {
                $.ajax({
                    url: 'product/add',
                    data:$('#addForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            layer.closeAll();
                            $('#addForm')[0].reset();
                            table.reload('myTable');
                        }else{
                            layer.msg('添加失败');
                            table.reload('myTable');
                        }
                    }
                })
                return false;
            })

            //删除选中操作  删除选中按钮的单击事件
            $('#deleteSelected').click(function () {
                //获取选中的条目对象
                var checkStatus = table.checkStatus('myTable');
                //checkStatus.data代表获取选中行的所有数据  checkStatus.data.length是选中行的数量
                if(checkStatus.data.length==0){
                    layer.msg('请至少选择一个要删除的数据！');
                    return;
                }
                //定义一个数组 保存要删除数据的编号
                var ids = [];
                for(var i=0;i<checkStatus.data.length;i++){
                    ids.push(checkStatus.data[i].pid);//遍历选中的数据  将数据中的编号一一保存到数组中
                }
                //执行批量删除方法
                $.ajax({
                    url:'product/removeAny',
                    data:'pids='+ids,
                    success:function (result) {
                        if(result.flag){
                            layer.msg('批量删除成功');
                            table.reload('myTable');
                        }else{
                            layer.msg('批量删除失败');
                        }
                    }
                })
            })
            //toolbar中的删除和修改操作
            table.on('tool(tableFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                //var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if(layEvent === 'upd'){ //修改
                    //弹出修改页面的form表单
                    layer.open({
                        type:1,
                        title:'修改页面',
                        area:'500px',
                        content:$('#updateForm')
                    })
                    //回显修改页面数据
                    $.ajax({
                        url:'product/getOne',
                        data:'pid='+data.pid,
                        success:function (result) {
                            form.val('updateFormFilter',{
                                pid:result.pid,
                                pname:result.pname,
                                price:result.price,
                                stock:result.stock,
                                des:result.des
                            })
                        }
                    })
                    //修改表单的提交事件
                    form.on('submit(updatFilter)',function () {
                        console.log(111111)
                        $.ajax({
                            url: 'product/update',
                            data:$('#updateForm').serialize(),
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('修改成功');
                                    layer.closeAll();
                                    table.reload('myTable');
                                }else{
                                    layer.msg('修改失败');
                                }
                            }
                        })
                        return false;
                    })
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除该行么', function(index){
                        //执行删除方法
                        $.ajax({
                            url:'product/remove',
                            data:'pid='+data.pid,
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('删除成功');
                                    table.reload('myTable');
                                }else{
                                    layer.msg('删除失败');
                                }
                            }
                        })
                        layer.close(index);
                    });
                }
            });
        })
    </script>
</body>
</html>